<template>
  <div class="article-detail-container">
    <div class="breadcrumb-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章详情页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="article">{{article.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-page-header @back="goBack" content=""></el-page-header>

    <div class="article-detail" v-if="article">
      <h2 class="article-title">{{article.title}}</h2>
      <div class="article-info">
        <div class="article-time"><i class="el-icon-date"></i>{{article.time}}</div>
        <div class="article-type"><i class="el-icon-document"></i>{{article.type}}</div>
        <div class="article-views"><i class="el-icon-view"></i>{{article.views}}</div>
      </div>
      <div class="article-cover" v-if="article.coverImg">
        <img :src="baseUrl + article.coverImg" alt="">
      </div>
      <p class="article-content" v-html="article.content"></p>
    </div>
    <div v-else>文章找不到了</div>
  </div>
</template>

<script>
import { baseUrl } from "../api";
export default {
  name: "ArticleDetail",
  data() {
    return {
      /*article: {
        id: '1',
        title: '标题',
        type: 'Javascript',
        time: '2022-03-01 20:14:52',
        content: '内容简要...',
        views: 10
      }*/
      article: null,
      baseUrl: baseUrl
    }
  },
  methods: {
    getArticleById(id) {
      const url = '/home/getArticleById/'+id;
      this.$http.get(url).then(response=>{
        let result= response.data;
        if(result.code===200) {
          console.log(result);
          this.article = JSON.parse(result.data);
        }
      })
    },
    goBack() {
      console.log('go back');
      this.$router.back();
    }
  },
  mounted() {
    let id= this.$route.params.id
    this.getArticleById(id);
  }
}
</script>

<style scoped lang="less">
  .article-detail-container {
    margin: 10px;
    .breadcrumb-wrapper {
      height: 20px;
      padding: 10px;
      background: #E1F0FF;
      .el-breadcrumb {
        line-height: 20px;
      }
    }

    .article-detail {
      width: 100%;
      .article-title {
        font-size: 28px;
        line-height: 32px;
        margin: 20px 0;
        letter-spacing: 2px;
        text-align: center;
      }
      .article-info {
        //width: 400px;
        //margin: 20px auto;
        display: flex;
        justify-content: center;  // 水平居中
        align-items: center;  // 垂直居中
        .article-time, .article-type, .article-views {
          font-size: 12px;
          line-height: 16px;
          margin: 4px 10px;
          color: #99a9bf;
          i {
            margin-right: 4px;
          }
        }
      }

      .article-cover {
        width: 100%;
        height: 300px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .article-content {
        text-align: left;
        font-size: 16px;
        line-height: 20px;
        margin: 20px 10px;
        color: #939393;
        text-indent: 2em;  // 段落首行缩进2字符
      }
    }
  }
</style>
